<!DOCTYPE html>
<!--
Copyright 2009 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
<head>
  <title>goog.fx.dom</title>
  <script src="../base.js"></script>
  <script src="../deps.js"></script>
  <script>
    goog.require('goog.events.EventTarget');
    goog.require('goog.fx');
    goog.require('goog.fx.dom');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <style>
    #test1 {
      position:absolute;
      left: 150px;
      top: 100px;
      width: 20px;
      height: 20px;
      background-color: rgb(0,0,0);
      font-size: 1px;
    }

    button {
      font: normal 10px arial;
      width: 125px;
    }
  </style>
</head>
<body>
  <h1>goog.fx.dom</h1>
  <p><strong>Demonstrations of the goog.fx.dom. library</strong>.  It is built on top
  of a generic animation handler that can be used for more complex goog.fx.dom.</p>

  <p>
    <button id="but0" onclick="return slide(0,0);">Slide To 0x0</button><br>
    <button id="but1" onclick="return slide(400,40);">Slide To 400x40</button><br>
    <button id="but2" onclick="return slide(300,200);">Slide To 300x200</button><br>
    <button id="but3" onclick="return slide(600,100);">Slide To 600x100</button>
  </p>

  <p>
    <button id="but4" onclick="return resize(50,50);">Resize To 50x50</button><br>
    <button id="but5" onclick="return resize(250,50);">Resize To 250x50</button><br>
    <button id="but6" onclick="return resize(5,5);">Resize To 5x5</button><br>
    <button id="but7" onclick="return resize(250,250);">Resize To 250x250</button>
  </p>

  <p>
    <button id="but8" onclick="return fadeout();">Fade Out</button><br>
    <button id="but9" onclick="return fadein();">Fade In</button>
  </p>

  <p>
    <button id="but10" onclick="return color(200,0,0);">Transform to red</button><br>
    <button id="but11" onclick="return color(180,180,180);">Transform to grey</button><br>
    <button id="but12" onclick="return color(0,0,0);">Transform to black</button><br>
    <button id="but13" onclick="return color(100,100,255);">Transform to blue</button>
  </p>


  <div id="test1">HELLO</div>

  <script>
    var col = [0,0,0];
    var duration = 1000;

    var el = document.getElementById('test1');

    function enableButtons() {
      for (var i = 0; i <= 13; i++) {
        document.getElementById('but' + i).disabled = false;
      }
    }

    function disableButtons() {
      for (var i = 0; i <= 13; i++) {
        document.getElementById('but' + i).disabled = true;
      }
    }

    function slide(a, b) {
      var x = el.offsetLeft;
      var y = el.offsetTop;
      var anim = new goog.fx.dom.Slide(el, [x, y], [a, b], duration,
                                       goog.fx.easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, disableButtons);
      goog.events.listen(anim, goog.fx.Animation.EventType.END, enableButtons);
      anim.play();
      return false;
    }

    function resize(a, b) {
      var w = el.offsetWidth;
      var h = el.offsetHeight;
      var anim = new goog.fx.dom.Resize(el, [w, h], [a, b], duration,
                                        goog.fx.easing.easeOut);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, disableButtons);
      goog.events.listen(anim, goog.fx.Animation.EventType.END, enableButtons);
      anim.play();
      return false;
    }

    function fadeout() {
      var anim = new goog.fx.dom.FadeOutAndHide(el, duration);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, disableButtons);
      goog.events.listen(anim, goog.fx.Animation.EventType.END, enableButtons);
      anim.play();
      return false;
    }

    function fadein() {
      var anim = new goog.fx.dom.FadeInAndShow(el, duration);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, disableButtons);
      goog.events.listen(anim, goog.fx.Animation.EventType.END, enableButtons);
      anim.play();
      return false;
    }

    function color(r,g,b) {
      var anim = new goog.fx.dom.BgColorTransform(el, col, [r,g,b], duration);
      goog.events.listen(anim, goog.fx.Animation.EventType.BEGIN, disableButtons);
      goog.events.listen(anim, goog.fx.Animation.EventType.END, enableButtons);
      goog.events.listen(anim, goog.fx.Animation.EventType.ANIMATE,
                         function(e) { col = [e.x,e.y,e.z]; });
      anim.play();
      return false;
    }

  </script>
</body>
</html>
